<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue表单增删操作</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vuedemo.js"></script>
</head>

<body>
    <div class="container" id="app">
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" placeholder="输入姓名" v-model="name">
        </div>
        <div class="form-group">
            <label>学号</label>
            <input type="number" class="form-control" placeholder="输入学号" v-model="number">
        </div>
        <div class="form-group">
            <label>是否已做核酸</label>
            <input type="checkbox" v-model="residence">
        </div>
        <div>
            <input type="button" value="添加" class="btn btn-primary" @click="add()" :disabled="!name || !number">
            <input type="reset" value="重置" class="btn btn-danger" @click="reset()" :disabled="!name&&!number">
            <input type="button" value="全部删除" class="btn btn-danger" @click="dele()" :disabled="list.length==0">
        </div>
        <table class="table table-bordered table-hover">
            <caption class="h3 text-info">信息收集表</caption>
            <tr class="text-danger">
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">学号</th>
                <th class="text-center">情况</th>
                <th class="text-center">操作</th>
            </tr>
            <tr v-show="list.length==0">
                <!-- colspan指的是可横跨列数 -->
                <td colspan="5" class="text-center text-muted">
                    <p>暂无数据</p>
                </td>
            </tr>
            <tr class="text-center" v-for="(item,index) in list" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.number}}</td>
                <td>{{item.residence | stateFilter}}</td>
                <td><button data-toggle="modal" data-target="#layer" @click="del()">删除</button></td>
            </tr>
        </table>
        <!-- data-toggle：指以什么事件触发，相当于告诉浏览器你是一个什么组件，常用的如modal(模态框),popover(弹出框),tooltips(提示框)等，
                    data-target：指事件的设置目标，相当于告诉浏览器你要操作那个元素 -->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">删除成功</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>